<template>
  <view class="content">
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
        @scrolltolower="lower" @scroll="scroll">
        <!-- 轮播图 -->
        <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
          <swiper-item>
            <!-- <view class="swiper-item uni-color-red">A</view> -->
            <image src='@/static/image/bg_test.png'></image>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item uni-bg-green">B</view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item uni-bg-blue">C</view>
          </swiper-item>
        </swiper>
        <view class="text-area">
          <text class="title">{{ title }}</text>
        </view>
    </scroll-view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      scrollTop:0,
      background: ['color1', 'color2', 'color3'],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500
    }
  },
  onLoad() {},
  methods: {
    upper() {
      console.log('upper')
    },
    lower() {
      console.log('lower')
    },
    scroll(){
      console.log('scroll')
    }
  },
}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.swiper {
		height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}
</style>
